<template>
  <view class="bgColor">
    <view class="form">
      <text class="title"> 你好，<br />欢迎登录口袋校园 </text>
      <text class="info">未注册的用户请点击快速注册，注册后登录</text>
      <uni-forms
        label-position="top"
        ref="form"
        :modelValue="userForm"
        :rules="rules"
      >
        <uni-forms-item label="手机号码" name="mobile">
          <input
            type="text"
            v-model="userForm.mobile"
            placeholder="请输入手机号码"
          />
        </uni-forms-item>
        <uni-forms-item label="密码" name="password">
          <input
            type="password"
            v-model="userForm.password"
            placeholder="请输入密码"
          />
        </uni-forms-item>
        <!-- 同意协议 -->
        <view class="access">
          <checkbox-group @change="changSelect">
            <label class="radio">
              <checkbox :checked="isSelect" />已经阅读并
              <span> 同意用户协议、隐私政策</span>
            </label>
          </checkbox-group>
        </view>
      </uni-forms>
      <button class="btn" :class="{ active: isSelect }" @click="submitForm">
        登录
      </button>
      <view class="fun">
        <text @click="gotoSingUp">立即注册</text>
        <text>忘记密码？</text>
      </view>
    </view>

    <!-- 其他登录方式 -->
    <view class="otherLogin">
      <view class="other">
        <view class="img">
          <image src="@/static/images/矩形@3x.png" mode=""></image>
        </view>
        <text class="text">其他登录方式</text>
        <view class="img">
          <image src="@/static/images/矩形@3x.png" mode=""></image>
        </view>
      </view>
      <view class="logo">
        <view class="img">
          <image src="../../static/images/qq.png" mode=""></image>
        </view>
        <view class="img">
          <image src="../../static/images/wx.png" mode=""></image>
        </view>
        <view class="img">
          <image src="../../static/images/wb.png" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 表单ref引用
const form = ref(null)

// 表达数据
const userForm = reactive({
  mobile: '',
  password: '',
})

// 规则
const rules = reactive({
  mobile: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '请填写手机号码',
      },
      {
        validateFunction: function (rule, value, data, callback) {
          // 正则表达式：中国地区的手机号+86
          const passwordPattern = /^1[3-9]\d{9}$/
          if (!passwordPattern.test(value)) {
            callback('请填写正确手机号码')
          } else {
            callback() // 验证通过
          }
        },
      },
    ],
  },
  password: {
    // name 字段的校验规则
    rules: [
      // 校验 name 不能为空
      {
        required: true,
        errorMessage: '请填写密码',
      },
      {
        validateFunction: function (rule, value, data, callback) {
          // 正则表达式：至少一个字母且长度大于6位
          const passwordPattern = /^(?=.*[a-zA-Z]).{6,}$/
          if (!passwordPattern.test(value)) {
            callback('密码必须包含至少一个字母且长度大于6位')
          } else {
            callback() // 验证通过
          }
        },
      },
    ],
  },
})

// 协议按钮
const isSelect = ref(false)

// 修改协议状态
function changSelect() {
  isSelect.value = !isSelect.value
}

// 登录事件
async function submitForm() {
  if (!isSelect.value) {
    uni.showToast({
      title: '请勾选协议',
      time: 1500,
      icon: 'error',
    })
    return
  }

  try {
    // 表单验证
    const res = await form.value.validate()

    // 显示loading
    uni.showLoading({
      title: '登录中...',
    })

    // 发送网络请求
    const { result } = await uniCloud.callFunction({
      name: 'user_login',
      data: res,
    })

    if (result.code == -1) {
      uni.showToast({
        title: result.mes,
        icon: 'error',
      })
      return
    }

    if (result.code == 100) {
      uni.showToast({
        title: '登录成功',
        time: '2000',
        icon: 'success',
      })
      uni.switchTab({
        url: '/pages/home/home',
      })
    }
  } catch (error) {
    // 处理错误
    uni.showToast({
      title: '登录失败',
      icon: 'error',
    })
  } finally {
    // 无论成功失败都会执行，确保loading被关闭
    uni.hideLoading()
  }
}

// 跳转到注册页面
function gotoSingUp() {
  uni.navigateTo({
    url: '/pages/singUp/singUp',
  })
}
</script>

<style lang="scss" scoped>
.bgColor {
  height: 100vh;
  box-sizing: border-box;
  padding: 0 60rpx;
  padding-top: 220rpx;
  position: relative;

  // 表单样式
  .form {
    .title {
      font-size: 56rpx;
      font-weight: bold;
      line-height: 72rpx;
    }

    .info {
      font-size: 20rpx;
      font-weight: 400;
      line-height: 24rpx;
      display: block;
      color: #aaaaaa;
      margin: 8rpx 0;
    }

    .uni-forms {
      margin-top: 90rpx;

      .uni-forms-item::v-deep .uni-forms-item__label span {
        font-size: 36rpx;
        font-weight: bold;
        display: block;
        width: 400rpx;
      }

      .uni-forms-item::v-deep input {
        border-bottom: 1px solid #0000000d;
        height: 96rpx;
        color: #000;
        font-size: 32rpx;
        font-weight: 400;
      }

      .access {
        margin-top: -10rpx;
      }

      .radio {
        font-size: 20rpx;

        span {
          display: inline-block;
          color: #4b9affff;
          border-bottom-color: #4b9affff;
        }
      }
    }

    .btn {
      margin-top: 80rpx;
      background-color: rgba(0, 0, 0, 0.4);
      border: none;
      color: #fff;
      font-size: 28rpx;
      font-weight: 500;
      height: 96rpx;
      line-height: 96rpx;
    }

    .btn.active {
      background-color: rgba(0, 0, 0);
    }

    .fun {
      margin: 30rpx 0;
      display: flex;
      justify-content: space-between;
      color: #666666;
      font-size: 24rpx;

      text {
        border-bottom: 2rpx solid #666;
      }
    }
  }

  // 其他登录方式
  .otherLogin {
    width: calc(100vw - 120rpx);
    position: fixed;
    bottom: 40rpx;

    .other {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .text {
        font-size: 28rpx;
        color: #999;
        box-sizing: border-box;
      }

      .img {
        width: 180rpx;
        height: 4rpx;
        display: flex;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .logo {
      display: flex;
      justify-content: space-between;
      margin: 40rpx 0;

      .img {
        width: 92rpx;
        height: 92rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
